An INF555 nonprofit website overhaul by Kassandra Castro
Cabrillo Marine Aquarium
A trusted resource that inspires exploration, respect and conservation of Southern California marine life.
Initial state
The nonprofit's current website is fully functional, but outdated. Lacking responsiveness and
limiting the entirety of the Home page content above the fold, the design is reminiscent
of the pre-smartphone era.
The CMA website before the design was overhauled.
Getting to know the users
We set out to learn about the people who use the aquarium's website and make a product that best served these visitors, volunteers, and other supporters.
Persona Hypothesis
Who might use this product? How might their needs and behaviors vary?
Primary Persona
Who are the primary users? How many interfaces do you require? Who would use each interface?
Goal-Directed Context User Scenario
When and how might our persona find herself using our product?
User Stories
The agile way. Who are the people that use this site? What motivates them?
After analyzing the results of our user research, we needed the following features:
Mapping it out
With our findings in mind, we started mapping out the site:
Site Map
Laying out the information architecture with the help of Creately.
Wireframes
Plotting out the content using Sketch.
1.0 Home Page, 2.0 Visit Page, 2.1 Exhibits Page
4.0 Support Page, 4.1 Shop Page, 4.1.1 Item Page
3.0 Programs Page, 3.1 Category Program List Page, 3.2 Program Description Page, 3.3 Application Page
Prototyping
We were ready to start applying the content to the structure we laid out and revising our wireframes for mobile as responsive design.
User testing
We used Validately to perform unmoderated user testing on our Sketch prototype
Research Plan
Who are we testing our product on? What do we hope to accomplish?
Questions & Tasks
Users had to respond to these questions and attempt these tasks.
Screener Questions: user was disqualified if did not include "Marine Animals" in selection for question 1, chose "no" for question 2, or chose "I have no interest in aquariums whatsoever" for question 3.
Establishing Questions: warm the user up and put in the aquarium website mind frame.
Tasks & Followup Questions: have the user complete tasks, ask relevant task-specific questions before moving on.
Note: Due to a failure to update success urls after updating Sketch Cloud prototype, the Passed/Failed numbers reflected in the Task Analyses are incorrect. Find updated task completion rates at the end of each task and question set.
Task 1 (4/4 Participants were able to find the next coming event)
Task 2 (4/4 Participants were able to find that the aquarium is closed on Mondays)
Task 3 (4/4 Participants successfully submitted a donation)
Task 4 (3/4 Participants were able to locate the exhibit detail page)
Followup Questions: questions about the experience and product as a whole.
Findings
What issues did the users uncover?
Addressing our findings
We implemented changes to correct for user assumptions and removed some of the obstacles we discovered through our user testing:
Modifying the Hamburger Menu
Users had difficulty locating the Exhibits section.
Easing Submission of Payment Information at Donation Checkout
Users attempted to add to cart and go to shop, instead of continuing down to payment.
Making Buttons Uniform on Pictures
Users failed to notice Exhibit button on Visit page, and only one user noticed the Donate Now button on the home page.
